/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { pxToDp } from '../../utils/stylesKits';
class THButton extends Component {
    // 当前组件默认样式
    static defaultProps = {
        style: {},
        textStyle: {}
    }
    render() {
        const { textStyle, onPress, disabled } = this.props;
        const styles = StyleSheet.create({
            linearGradient: {
                flex: 1,
                paddingLeft: pxToDp(15),
                paddingRight: pxToDp(15),
                borderRadius: pxToDp(5),
                justifyContent:'center',
                alignItems:'center',
            },
            buttonText: {
                fontSize: pxToDp(18),
                fontFamily: 'Gill Sans',
                textAlign: 'center',
                color: '#fff',
                backgroundColor: 'transparent',
            },
        });
        return (
            <TouchableOpacity disabled={disabled} onPress={onPress} style={{ width: '100%', height: '100%', ...this.props.style, overflow:'hidden' }}>
            {/*
              * colors 第一和值是渐变按钮的start的颜色 第二个值数渐变按钮end的颜色
              * 这个元素必须有宽高
              * start && end是定义渐变按钮颜色过渡的方向
             */}
                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#9b63cd', '#e0708c']} style={styles.linearGradient}>
                    <Text style={{...styles.buttonText,...textStyle}}>
                        {this.props.children}
                    </Text>
                </LinearGradient>
            </TouchableOpacity>
        );
    }
}
export default THButton;
